<section class="wrapper">
  <div class="row">
    <div class="col-lg-12">
      <section class="panel">
        <header class="panel-heading">
          <button class="btn btn-info" (click)="addGroup()">+ Add Group</button>
        </header>
        <div class="panel-body">
          <div class="adv-table">
            <div class="row" id="table-margin">
              <div class="col-sm-2">
                <div class="dropdown" style="display: inline-block;">
                  <button class="btn btn-info" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Action
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="true">
                    <li><a href="javascript:void(0);">delete</a></li>
                    <li><a href="javascript:void(0);">modify condition and tags</a></li>
                  </ul>
                </div>
              </div>
              <div class="col-sm-2">
                <select class="custom-select btn btn-info">
                  <option selected>Selector Tags</option>
                  <option value="">Auto</option>
                  <option value="">VIP</option>
                  <option value="">Outdoor</option>
                </select>
              </div>
              <div class="col-sm-2">
                <select class="custom-select btn btn-info">
                  <option selected>Fliter Status</option>
                  <option value="">Normal</option>
                  <option value="">Alert</option>
                  <option value="">Archieve</option>
                  <option value="">Processing</option>
                </select>
              </div>
              <div class="col-sm-2">
                <select class="custom-select btn btn-info">
                  <option selected>Add Date</option>
                  <option value="">All Day</option>
                  <option value="">Last Days</option>
                  <option value="">Last Week</option>
                  <option value="">Last Month</option>
                </select>
              </div>
            </div>
          </div>
          <div style="height: 10px;"></div>
          <table class="table table-bordered table-striped" id="example">
            <thead>
              <tr>
                <th class="text-center">
                  <input type="checkbox" class="form-check-input pull-left" (change)="onAllChecked($event.target.checked)">
                  All
                </th>
                <th class="text-center">Image</th>
                <th class="text-center">Title</th>
                <th class="text-center">Count</th>
                <th class="text-center">AVG Rank</th>
                <th class="text-center">AVG Price</th>
                <th class="text-center">Last Update</th>
                <th class="text-center">Add Date</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of groupList; let itemIndex=index;">
                <td class="text-center">
                  <input type="checkbox" [checked]="item.checked" (change)="onRowChecked($event, itemInex)" class="form-check-input pull-left">
                </td>
                <td class="text-center">
                  <img src="{{item.imageUrl}}" alt="amoazon images">
                </td>
                <td class="text-center" style="line-height: 72px;">{{item.title.substring(-1, 60)}}</td>
                <td class="text-center" style="line-height: 72px;">{{item.count}}</td>
                <td class="text-center" style="line-height: 72px;">{{item.avg_rank}}</td>
                <td class="text-center" style="line-height: 72px;">{{item.avg_price}}</td>
                <td class="text-center" style="line-height: 72px; width: 120px;">{{item.last_update}}</td>
                <td class="text-center" style="line-height: 72px; width: 120px;">{{item.add_date}}</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th class="text-center"></th>
                <th class="text-center">Image</th>
                <th class="text-center">Title</th>
                <th class="text-center">Count</th>
                <th class="text-center">AVG Rank</th>
                <th class="text-center">AVG Price</th>
                <th class="text-center">Last Update</th>
                <th class="text-center">Add Date</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </section>
    </div>
  </div>
</section>
